<template>
<div>
  <!--  面包屑导航区域 -->
  <br>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item >首页</el-breadcrumb-item>
    <el-breadcrumb-item>生意</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row class="home" :gutter="20" >
    <el-col :span="10"  style="margin-top: 20px">
<!--      <el-card shadow="always">-->
<!--        <div id="main" style="width: 600px;height:150px;"></div>-->
<!--      </el-card>-->
<!--      <br>-->
      <el-card shadow="always">
        <div id="today" style="width: 400px;height:520px;">
          <el-row>
            <h2 style="margin-left: 20px">今日销售情况</h2>
          </el-row>
          <div id="todayCharts" style="width: 500px;height:400px;"></div>

        </div>
      </el-card>
    </el-col>
    <el-col :span="14" style="margin-top: 20px">
      <el-card shadow="always">
        <div id="select" style="width: 700px;height:520px;">
          <el-row>
            <h2 style="margin-left: 20px">时间段销售情况</h2>
          </el-row>
          <el-row>
            <el-col :span="9">
              <el-date-picker
                v-model="selectTime.start"
                type="date"
                placeholder="选择开始日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-col>
            <el-col class="line" :span="1">___</el-col>
            <el-col :span="9">
                <el-date-picker
                  v-model="selectTime.end"
                  type="date"
                  placeholder="选择结束日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-col>
            <el-col  :span="3">
              <el-button  type="info" @click="showSales">确 定</el-button>
            </el-col>
          </el-row>
          <br>
          <div id="selectCharts" style="width: 700px;height:400px;"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
//导入echarts
import  echarts from 'echarts';
export default {
  name: 'Sales',
  data(){
    return{
      //返回当天营业额数据
      turnoverTodayItem:{
        sumProfit:'',
        sumTurnover:''
      },
      //当日echarts数据
      echartsTodayData:[
      ],
      echartsTodayDataList:[
      ],
      //echarts选定时间
      selectTime:{
        start:'',
        end:''
      },
      //选定时间的echarts数据
      echartsSelectData:[
      ],
      echartsSelectProfitDataList:[
      ],
      echartsSelectTurnOverDataList:[
      ],
    }
  },
  created () {
    this.initTodayList()
    //this.showSales()
  },
  methods:{
    //初始化页面获取当日数据
    async initTodayList(){
      const { data: res } =
        await this.$http.post('/findTodayTurnover', [])
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404)
        return this.$message.info('今日暂无营业情况！')
      if (res.code == 10200) {
        let dataItem=[]
        let item=[]
        res.data.detail.forEach(function(value, index) {
          dataItem=dataItem.concat(value.username)
          item=item.concat({
            value: value.profit, name: value.username
          })
        })
        this.echartsTodayData=dataItem
        this.echartsTodayDataList=item
        this.todayEcharts()
      }
    },
    //初始化页面获取默认数据,选定日期后展示echarts图像
    async showSales(){
      var time1 = new Date(this.selectTime.start).getTime();
      var time2 = new Date(this.selectTime.end).getTime();
      if(time1>time2)
        return this.$message.error('请正确选择时间段!')
      const { data: res } =
        await this.$http.post('/findPeriodTurnover', {
          beginDate:this.selectTime.start,
          endDate:this.selectTime.end
        })
      console.log(res)
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404)
        return this.$message.info('该时间段内暂无营业情况！')
      if (res.code == 10200) {
        let dataItem=[]
        let itemP=[]
        let itemT=[]
        res.data.detail.forEach(function(value, index) {
          dataItem=dataItem.concat(value.username)
          itemP=itemP.concat({
            value: value.profit, name: value.username
          })
          itemT=itemT.concat({
            value: value.turnover, name: value.username
          })
        })
        this.echartsSelectData=dataItem
        this.echartsSelectProfitDataList=itemP
        this.echartsSelectTurnOverDataList=itemT
        this.selectEcharts()
      }
    },
    //渲染单日ehcarts实例
    todayEcharts(){
      //基于准备好的dom，初始化
      var todayChartDom = document.getElementById('todayCharts');
      var todayMyChart = this.$echarts.init(todayChartDom);
      var todayOption;
      todayOption = {
        title: {
          text: '今日Chart',
          subtext: '利润',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: this.echartsTodayData
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '利润',
            type: 'pie',
            radius: [20, 140],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: this.echartsTodayDataList
          }
        ]
      };
      todayOption && todayMyChart.setOption(todayOption);
    },
    //渲染选定ehcarts实例
    selectEcharts(){
      //基于准备好的dom，初始化ehcarts实例
      var chartDom = document.getElementById('selectCharts');
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '选择日期Chart',
          subtext: '左图为利润，右图为交易额',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: this.echartsSelectData
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '利润',
            type: 'pie',
            radius: [20, 100],
            center: ['25%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: this.echartsSelectProfitDataList
          },
          {
            name: '交易额',
            type: 'pie',
            radius: [20, 100],
            center: ['75%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: this.echartsSelectTurnOverDataList
          }
        ]
      };
      option && myChart.setOption(option);
    },

  },

}
</script>

<style scoped>

</style>
